import { defineComponent, VNode, ref, watchEffect, onUnmounted } from 'vue'

/* scss */
import '@src/modules/intelligentQuality/views/newInfo/components/index.scss'

/* components */
import ControlButton from '@src/modules/intelligentQuality/views/newInfo/components/controlButton.tsx'

import BaseIntelligentTips from '@src/assets/img/intelligent-tips.png'

export default defineComponent({
    name: 'CreatePhotoBase',
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    emits: ['change'],
    setup(props, { emit }) {
        const minCheckCount = ref(props.data?.minCheckCount) // 最小张数
        const minCheckScore = ref(props.data?.minCheckScore) // 占有图片的比
        const minPictureCheckScore = ref(props.data?.minPictureCheckScore ) // 图片相似度
        const nowCheck = ref(props.data?.nowCheck) // 是否启用实时质检模式


        const stop = watchEffect(() => {
            emit('change', {
                minCheckCount: minCheckCount.value,
                minCheckScore: minCheckScore.value,
                minPictureCheckScore: minPictureCheckScore.value,
                nowCheck: nowCheck.value
            })
        })

        onUnmounted(() => {
            stop()
        })
        return {
            minCheckCount,
            minCheckScore,
            minPictureCheckScore,
            nowCheck
        }
    },
    render() {
        return (
            <div class="step-photo-base">
                <div class="base-title">
                请依次设置图片质检规则：
                </div>
                <div class="base-content">
                    <div class="base-content-item">
                        <div class="base-content-item-title">第一步、相似度达标标准</div>
                        <div class="base-content-item-content">
                            <div class="base-content-item-content-item">
                                <span><span class="dot">&#183;</span> 单张图片与范本图片的相似度等于或超过</span>
                                &nbsp;
                                <ControlButton num={this.minPictureCheckScore} onChange={(val) => {
                                    this.minPictureCheckScore = val
                                }}/>
                                &nbsp;
                                <span>%时，该图片即被视为达到质检标准;</span>
                            </div>
                        </div>
                    </div>
                    <div class="base-content-item">
                        <div class="base-content-item-title">第二步、工单质检合格标准</div>
                        <div class="base-content-item-content">
                            <span>工单中达到质检标准的图片数量需满足以下任一条件，工单才会被标记为质检合格；</span>
                            <div class="base-content-item-content-item">
                                <span>
                                    <span class="dot">&#183;</span>
                                    占工单中上传的所有图片比例等于或超过
                                </span>
                                &nbsp;<ControlButton num={this.minCheckScore} onChange={(val) => {this.minCheckScore = val}}/>&nbsp;%；
                            </div>
                            <div class="base-content-item-content-item">
                                <span>
                                    <span class="dot">&#183;</span>
                                    达到质检标准的图片数量等于或超过
                                </span>
                                &nbsp;<ControlButton num={this.minCheckCount} onChange={(val) => {this.minCheckCount = val}}/>&nbsp;张；
                            </div>
                        </div>
                    </div>
                </div>
                <div class="base-nowInt-tips">
                   <p><i class="el-icon-warning" />提示：质检结果可在质检机器人右侧处查看质检报告，以了解相应的运行情况</p>
                </div>
                <div class="base-nowInt base-title">
                    <div class="base-nowInt-title">
                        启用实时质检模式
                    </div>
                    <div class="base-nowInt-switch">
                        <el-switch value={this.nowCheck} onChange={() => this.nowCheck = !this.nowCheck}/>
                            {
                                this.nowCheck ? (
                                    <span class="active">开启</span>
                                ) : (
                                    <span>关闭</span>
                                )
                            }
                        <el-popover
                            placement="right-end"
                            width="360"
                            trigger="hover"
                        >
                            <div class="base-nowInt-tips-img">
                                <img src={BaseIntelligentTips} alt="" />
                            </div>
                            <i class="iconfont icon-question-circle question-icon" slot="reference"></i>
                        </el-popover>
                    </div>
                    <div class="base-nowInt-desc">
                        启用实时质检后，操作人员在上传质检图片时，质检机器人会实时计算该图片与范本图片的相似度，此功能适用于要求工作人员在服务现场就要上传符合规范的图片的场景。
                    </div>
                </div>
            </div>
        )
    }
})

